<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  "use strict"; {
    let arr = [
      { type: "家具", name: "沙发", price: 1750 },
      { type: "电子产品", name: "iphone", price: 800 },
      { type: "电子产品", name: "华为", price: 8400 },
      { type: "食品", name: "辣条", price: 18 },
      { type: "食品", name: "面粉", price: 744 },
      { type: "电子产品", name: "小米", price: 1800 },
      { type: "家具", name: "椅子", price: 711 },
      { type: "食品", name: "鸡蛋", price: 74 }
    ]; {
      // 传统的方法
      let obj = {};
      let res = [];
      arr.forEach((value, index, arr) => {
        if (!obj[value.type]) { //第一次出现这个产品
          // 把当前这个数据存在进res中
          obj[value.type] = 1;
          res.push({
            type: value.type,
            data: [value]
          });
        } else {
          res.forEach((item, key, res_arr) => { //遍历res，找到对应的type，并添加到data里面
            if (value.type == item.type) {
              res[key].data.push(value);
            };
          });
        };
      });
      // console.log(res);

    }; {
      let res1 = arr.reduce((pre, value, index, arr) => {
        /* 
          分析: 
            1.当pre为空数组时(即程序第一次执行)，find函数不会运行，pre.lenght == 0。会进入到esle部分，直接添加数据(对象)
            2.当pre不为空时，查找pre的每一项的type是否等于当前值(value)的type
              若相等，直接添加到当前项的name的数组里面
                如何确定当前项的？通过pre_index来记录当前项的下标
              若不相等，给pre数组添加多一项数据(对象)
            3.删除冗余字段，先定义type保存value.type的值
        */
        let pre_index = 0;
        // 当第一次时pre.length == 0 ，find为false, 直接进入到esle部分
        let find = pre.length && pre.find((item, key, pre_arr) => {
          pre_index = key;
          return item.type == value.type;
        });
        let type = value.type; //用户保存type
        delete value.type; //删除冗余的字段信息
        if (find) {
          pre[pre_index].name.push(value);
        } else {
          pre.push({
            type, //类型等于该项的type属性值
            name: [value], //name(数组)存入该条数据
          });
        };
        return pre;
      }, []);
      console.table(res1);
      console.log(JSON.stringify(res1, null, 2));
    };
  }; 
</script>

</html>